<template>
<view class="container">
	<block >
		<view class="content-container">
			<view class="nav_right">
				<view class="nav_right-content">
					<view class="nav-pai">
						<view class="nav-paili" :style="(!field||field=='sort')?'color:'+t('color1'):''" @tap="changeOrder"  data-field="sort" data-order="desc" >借记卡</view> 
						<view class="nav-paili"  :style="field=='sales'?'color:'+t('color1'):''" @tap="changeOrder"  data-field="sales" data-order="desc" >信用卡</view> 
					</view>
					<scroll-view class="classify-box" scroll-y="true" >
						<view class="product-itemlist"  >
							<!-- <view class="item" v-for="(item,index) in this.bankarray" :key="item.id" :class="item.stock <= 0 ? 'soldout' : ''" @click="goTarget(item.bank_name)" :data-url="'/pages/my/addBankCard?bank_name='+item.bank_name"> -->
							<view class="item" v-for="(item,index) in this.bankarray" :key="item.id" :class="item.stock <= 0 ? 'soldout' : ''" @click="goTarget(item.id)" :data-url="'/pages/my/addBankCard?bank_name='+item.bank_name">
								<view class="product-info">
									<view class="p2">
										<image class="image" src="../../static/img/bank_img/bank.png" style="width: 10px;height: 10px;" /><text style=" font-weight: 300; color: black;">{{item.bank_name}}</text></br>
									</view>
									<view class="p2">
										<text>单笔限额{{sortType == 1?item['xyk_money_max']:item['jjk_money_max']}}</text>
									</view>
									<view class="p3">
										<text>单日限额{{sortType == 1?item['xyk_day_max']:item['jjk_day_max']}}</text>
									</view>
					            </view>
							</view>
						</view>
						<view style="width:100%;height:100rpx"></view>
					</scroll-view>
				</view>
			</view>
		</view>
	</block>
</view>
</template>

<script>
var app = getApp();
	export default {

		data() {
			return {
				field:"",
				timer: null,
				addType: null, //1跳回钱包页2.跳入待付款
				// 信用卡时间需要绑定  
				params: {
					year: true,
					month: true,
				},
				
				show: false,
				bankarray:[],
				bankindex:0,
				status: null,
				xinyongShow: false,
				card_type: '储蓄卡',
				apply_id: '',
				submitShow: true,
				codeShow: false,
				boxShow: true,
				certCq:false,
				tips: '',
				// refCode: null,
				seconds: 59,
				member_id: '',
				addresinfo: {
					name: '',
					telephone: '',
					cert_id: '',
					card_number: '',
					bank_name: '中国工商银行',
					address: '湖北',
					subbranch: '',
					province: '湖北', //省
					city: '武汉',
					area: '',
					branch_name: '', //不参与校验，写默认值即可
					card_type: '',
					code: '',
					token_no: '',
					expiration: '',
					vip_code: '',
					member_type:'2',
					cert_validity_type:0,
					cert_begin_date:'20100506',
					cert_end_date:'20300506',
					code:'',
					trans_id:'',
					order_id:'',
					order_date:''
					
				},
				cityPickerValueDefault: [0, 0, 1],
				regiondata: '',
				items:"",
				sortType:0
			}
		},
		onLoad(option) {
			// this.addType = option.addtype
			var that = this;
			app.get('ApiIndex/getDgBankList',{}, function (res) {
				that.bankarray = res.data;
				that.addresinfo.bank_name = that.bankarray[0]['bank_name']
			});
		},
		onShow() {},
		methods: {
			goTarget(bank_id){
			    app.goto('/pages/my/addBankCard?selectBankname='+bank_id+'&bankType='+this.sortType)
			},
			changeOrder: function (e) {
			    
				var t = e.currentTarget.dataset;
			  
				this.field = t.field; 
				this.sortType = t.field == "sales"?1:0
				//this.getdatalist();
			  
			}
		},
		computed: {

		},
	}
</script>
<style>
page {height:100%;}
.container{width: 100%;height:100%;max-width:640px;background-color: #fff;color: #939393;display: flex;flex-direction:column}
.search-container {width: 100%;height: 94rpx;padding: 16rpx 23rpx 14rpx 23rpx;background-color: #fff;position: relative;overflow: hidden;border-bottom:1px solid #f5f5f5}
.search-box {display:flex;align-items:center;height:60rpx;border-radius:30rpx;border:0;background-color:#f7f7f7;flex:1}
.search-box .img{width:24rpx;height:24rpx;margin-right:10rpx;margin-left:30rpx}
.search-box .search-text {font-size:24rpx;color:#C2C2C2;width: 100%;}

.content-container{flex:1;height:100%;display:flex;overflow: hidden;}

.nav_left{width: 25%;height:100%;background: #ffffff;overflow-y:scroll;}
.nav_left .nav_left_items{line-height:50rpx;color:#333;border-bottom:0px solid #E6E6E6;font-size:28rpx;position: relative;border-right:0 solid #E6E6E6;padding:25rpx 30rpx;}
.nav_left .nav_left_items.active{background: #fff;color:#333;font-size:28rpx;}
.nav_left .nav_left_items .before{display:none;position:absolute;top:50%;margin-top:-12rpx;left:10rpx;height:24rpx;border-radius:4rpx;width:8rpx}
.nav_left .nav_left_items.active .before{display:block}

.nav_right{width: 100%;height:100%;display:flex;flex-direction:column;background: #f6f6f6;box-sizing: border-box;padding:20rpx 20rpx 0 20rpx}
.nav_right-content{background: #ffffff;padding:0 20rpx;height:100%}
.nav-pai{ width: 100%;display:flex;align-items:center;justify-content:center;}
.nav-paili{flex:1; text-align:center;color:#323232; font-size:28rpx;position: relative;height:80rpx;line-height:80rpx;}
.nav-paili .iconshangla{position: absolute;top:-4rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}
.nav-paili .icondaoxu{position: absolute;top: 8rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}

.classify-ul{width:100%;height:100rpx;padding:0 10rpx;}
.classify-li{flex-shrink:0;display:flex;background:#F5F6F8;border-radius:22rpx;color:#6C737F;font-size:20rpx;text-align: center;height:44rpx; line-height:44rpx;padding:0 28rpx;margin:12rpx 10rpx 12rpx 0}

.classify-box{padding: 0 0 20rpx 0;width: 100%;height:calc(100% - 60rpx);overflow-y: scroll; border-top:1px solid #F5F6F8;}
.classify-box .nav_right_items{ width:100%;border-bottom:1px #f4f4f4 solid;  padding:16rpx 0;  box-sizing:border-box;  position:relative; }

.product-itemlist{height: auto; position: relative;overflow: hidden; padding: 0px; display:flex;flex-wrap:wrap}
.product-itemlist .item{width:50%;display: inline-block;position: relative;margin-bottom: 12rpx;background: #fff;display:flex;padding:14rpx 0;border-radius:10rpx;border-bottom:1px solid #F8F8F8}
.product-itemlist .product-pic {width: 30%;height:0;overflow:hidden;background: #ffffff;padding-bottom: 30%;position: relative;border-radius:4px;}
.product-itemlist .product-pic .image{position:absolute;top:0;left:0;width: 100%;height:auto}
.product-itemlist .product-pic .saleimg{ position: absolute;width: 120rpx;height: auto; top: -6rpx; left:-6rpx;}
.product-itemlist .product-info {width: 98%;padding:0 10rpx 5rpx 20rpx;position: relative;border-style:solid }
.product-itemlist .product-info .p1 {color:#323232;font-size:25rpx;line-height:36rpx;margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:72rpx}
.product-itemlist .product-info .p2{margin-top:10rpx;height:36rpx;line-height:36rpx;overflow:hidden;}
.product-itemlist .product-info .p2 .t1{font-size:32rpx;}
.product-itemlist .product-info .p2 .t2 {margin-left:10rpx;font-size:24rpx;color: #aaa;text-decoration: line-through;/*letter-spacing:-1px*/}
.product-itemlist .product-info .p3{display:flex;align-items:center;overflow:hidden;margin-top:10rpx}
.product-itemlist .product-info .p3-1{font-size:20rpx;height:30rpx;line-height:30rpx;text-align:right;color:#999}
.product-itemlist .product-info .p4{width:56rpx;height:56rpx;border-radius:50%;position:absolute;display:relative;bottom:6rpx;right:4rpx;text-align:center;}
.product-itemlist .product-info .p4 .icon_gouwuche{font-size:32rpx;height:56rpx;line-height:56rpx}
.overlay {background-color: rgba(0,0,0,.5); position: absolute; width:60%; height: 60%; border-radius: 50%; display: none; top: 20%; left: 20%;}
.overlay .text{ color: #fff; text-align: center; transform: translateY(100%);}
.product-itemlist .soldout .product-pic .overlay{ display: block;}
::-webkit-scrollbar{width: 0;height: 0;color: transparent;}

.posterDialog{ position:fixed;z-index:9;width:100%;height:100%;background:rgba(0,0,0,0.8);top:var(--window-top);left:0}
.posterDialog .main{ width:80%;margin:60rpx 10% 30rpx 10%;background:#fff;position:relative;border-radius:20rpx}
.posterDialog .close{ position:absolute;padding:20rpx;top:0;right:0}
.posterDialog .close .img{ width:32rpx;height:32rpx;}
.posterDialog .content{ width:100%;padding:70rpx 20rpx 30rpx 20rpx;color:#333;font-size:30rpx;text-align:center}
.posterDialog .content .img{width:540rpx;height:960rpx}
.linkDialog {background:rgba(0,0,0,0.4);z-index:11;}
.linkDialog .main{ width: 90%; position: fixed; top: 50%; left: 50%; margin: 0;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.linkDialog .title {margin-bottom: 30rpx;}
.linkDialog .row {display: flex; height:80rpx;line-height: 80rpx; padding: 0 16rpx;}
.linkDialog .row .f1 {width: 40%; text-align: left;}
.linkDialog .row .f2 {width: 60%; height:80rpx;line-height: 80rpx;text-align: right;align-items:center;}
.linkDialog .image{width: 28rpx; height: 28rpx; margin-left: 8rpx;margin-top: 2rpx;}
.linkDialog .copyicon {width: 28rpx; height: 28rpx; margin-left: 8rpx; position: relative; top: 4rpx;}

.lianxi{color: #fff;border-radius: 50rpx 50rpx;line-height: 50rpx;text-align: center;font-size: 22rpx;padding: 0 14rpx;display: inline-block;float: right;}
</style>